<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食物营养成分查询</title>
    <style>
        .table_find {
            width:30%;
            margin-right:1%;
            margin-bottom:1%;
            overflow: hidden;
            border: 1px solid #cecece;
        }

        .table_find tbody {
            width:100%;
            height:300px;
            display:block;   /* 进行转换为块级元素 */
            overflow-y: scroll;   /* 使tbody的y轴可滚动 */
            overflow-x: hidden;
        }
        .table_find thead,
		tbody tr {
			display: table;   /* 进行转换为块级元素 */
			width:100%;
			table-layout: fixed;
		}

        .table_find,
        .table_find td,
        .table_find th {
            border-collapse: collapse;
        }

        .table_find td,
        .table_find th {
            padding: 5px 15px;
            text-align: center;
        }

        .table_find tr td{
            border-top:1px solid #cecece;
        }
        .table_find tr td:first-child{
            border-right:1px solid #cecece;
        }
        .table_find .bg_pink {
            background-color: pink;
        }

        .table_find .bg_yellow {
            background-color: rgb(250, 240, 185);
        }

        .table_find .bg_green {
            background-color: rgb(203, 250, 185);
        }

        .line {
            width: 100%;
            overflow: hidden;
            margin-bottom: 15px;
        }

        .text {
            line-height: 30px;
        }

        .text {
            width: 20%;
            overflow: hidden;
            text-align: right;
        }

        .userInput {
            width: 50%;
            height: 30px;
            box-sizing: border-box;
            text-indent: 0.5em;
            font-size: 16px;
            border: 1px solid #cecece;
        }

        .submit {
            width: 9%;
            height: 30px;
            line-height: 30px;
            box-sizing: border-box;
            text-align: center;
            border: 1px solid #cecece;
            margin-left: 1%;
            cursor: pointer;
        }

        .submit:active {
            background-color: rgb(16, 137, 207);
        }

        .left {
            float: left;
        }
    </style>
</head>

<body>

    <div id="content">

        <form>
            <div class="line">
                <div class="text left">查询食物名称：</div>
                <input type="text" class="userInput left" v-model="word" />
                <div class="submit left" @click="search">查询</div>
            </div>
        </form>
        <table cellPadding="0" cellSpacing="0" class="table_find left" class="table_content" v-for="(v, index) in list" :key="index">
            <thead>
                <th>名称</th>
                <th>每100g含量</th>
            </thead>
            <tbody>

                <tr>
                    <td>
                        <span class="keyName">食品名称</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.name}}</span>
                    </td>

                </tr>
                <tr class="bg_yellow">
                    <td>
                        <span class="keyName">热量(大卡)</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.rl}}</span>
                    </td>

                </tr>
                <tr class="bg_green">
                    <td>
                        <span class="keyName">硫胺素(B1)</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.las}}</span>
                    </td>

                </tr>
                <tr class="bg_green">
                    <td>
                        <span class="keyName">钙(毫克)</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.gai}}</span>
                    </td>

                </tr>
                <tr class="bg_pink">
                    <td>
                        <span class="keyName">蛋白质</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.dbz}}</span>
                    </td>

                </tr>
                <tr class="bg_green">
                    <td>
                        <span class="keyName">核黄素(B2)</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.su}}</span>
                    </td>

                </tr>
                <tr>
                    <td>
                        <span class="keyName">镁</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.mei}}</span>
                    </td>

                </tr>
                <tr class="bg_pink">
                    <td>
                        <span class="keyName">脂肪</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.zf}}</span>
                    </td>

                </tr>
                <tr class="bg_green">
                    <td>
                        <span class="keyName">烟酸(B3)</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.ys}}</span>
                    </td>

                </tr>
                <tr>
                    <td>
                        <span class="keyName">铁</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.tei}}</span>
                    </td>

                </tr>
                <tr class="bg_green">
                    <td>
                        <span class="keyName">碳水化合物</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.shhf}}</span>
                    </td>

                </tr>
                <tr class="bg_green">
                    <td>
                        <span class="keyName">维生素C</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.wsfc}}</span>
                    </td>

                </tr>
                <tr>
                    <td>
                        <span class="keyName">锰</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.meng}}</span>
                    </td>

                </tr>
                <tr class="bg_green">
                    <td>
                        <span class="keyName">膳食纤维</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.ssxw}}</span>
                    </td>

                </tr>
                <tr class="bg_green">
                    <td>
                        <span class="keyName">维生素E</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.wsse}}</span>
                    </td>

                </tr>
                <tr class="bg_green">
                    <td>
                        <span class="keyName">锌</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.xin}}</span>
                    </td>

                </tr>
                <tr class="bg_green">
                    <td>
                        <span class="keyName">维生素A</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.wssa}}</span>
                    </td>

                </tr>
                <tr class="bg_pink">
                    <td>
                        <span class="keyName">胆固醇</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.dgc}}</span>
                    </td>

                </tr>
                <tr>
                    <td>
                        <span class="keyName">铜</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.tong}}</span>
                    </td>

                </tr>
                <tr>
                    <td>
                        <span class="keyName">胡罗卜素</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.lb}}</span>
                    </td>

                </tr>
                <tr>
                    <td>
                        <span class="keyName">钾</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.jia}}</span>
                    </td>

                </tr>
                <tr>
                    <td>
                        <span class="keyName">磷</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.ling}}</span>
                    </td>

                </tr>
                <tr>
                    <td>
                        <span class="keyName">视黄醇当量(统一计量膳食中的维生素A)</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.shc}}</span>
                    </td>

                </tr>
                <tr>
                    <td>
                        <span class="keyName">钠</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.la}}</span>
                    </td>

                </tr>
                <tr>
                    <td>
                        <span class="keyName">硒</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.xi}}</span>
                    </td>

                </tr>
                <tr>
                    <td>
                        <span class="keyName">食品种类</span>
                    </td>
                    <td>
                        <span class="valueNumber">{{v.type}}</span>
                    </td>

                </tr>

            </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="../../component/library/jquery.min.js"></script>
    <script src="../../component/date/Utils.js"></script>
    <script>
        var find = new Vue({
            el: "#content",
            data: {
                webUrl: 'https://www.tianapi.com/console/',  //管理后台地址
                apiUrl: 'https://www.tianapi.com/apiview/121',   //api地址
                url: 'http://api.tianapi.com/txapi/nutrient/index',  //接口地址
                key: 'dca5f851d091f0e9fe879d8eae8fc126', //查询key
                word: '',    //查询食物名称
                mode: 0, //查询模式，固定
                list: [], //查询数据
                storageName: 'foodNutrition',   //本地存储key名
            },
            mounted() {
                //初始化本地存储
                utils.init(() => { });
                //初始化数据
                this.init();
            },
            methods: {
                //初始化数据
                init() {
                    let default_data = utils.getStorage(this.storageName);
                    if (default_data) {
                        this.list = default_data;
                    }
                },
                //查询
                search() {
                    //非空验证
                    if (this.word == null || !this.word || this.word == "" || this.word.length < 1) {
                        alert("请输入查询食物名称");
                        return;
                    }
                    
                    //数据重复检测
                    var reg = new RegExp(this.word);
                    var num = 0;
                    for (let a = 0; a < this.list.length; a++) {
                        if (this.list[a].name == this.word || this.list[a].name.match(reg)) {
                            num = 1;
                            if(window.confirm("已存在相同数据，继续添加有可能数据重复，请核对已有数据，是否继续？")){
                                //请求
                                this.getData();
                                return;
                            }
                        }
                    }

                    //请求
                    if(num < 1){
                        this.getData();
                    }

                },
                //请求
                getData(){
                    $.ajax({
                        method: 'post',
                        url: this.url,
                        data: {
                            key: this.key,
                            word: this.word,
                            mode: this.mode
                        },
                        success: (res) => {
                            if (res.code == 200) {
                                res.newslist.forEach(element => {                                    
                                    this.list.push(element);
                                });
                                //保存到本地存储
                                this.saveStorage(this.list);
                            } else {
                                alert(`出错了！报错信息：${res.msg}，错误码：${res.code}`);
                            }
                        }
                    });
                },
                //保存到本地存储
                saveStorage(value) {
                    utils.setStorage(this.storageName, value);
                }
            }
        });
    </script>
</body>

</html>